<template>
  <view class="header-component" :style="{ backgroundImage: 'url(' + getFullImageUrl(headerData.bgImage) + ')' }">
    <view class="header-left">
      <image class="logo" :src="getFullImageUrl(headerData.logo)"></image>
      <view class="header-text">
        <text class="title">{{ headerData.title }}</text>
        <text class="subtitle">{{ headerData.subtitle }}</text>
      </view>
    </view>
    <image class="header-icon" :src="getFullImageUrl(headerData.moreIcon)"></image>
  </view>
</template>

<script>

import { request, initBaseUrl, getFullImageUrl } from '../../utils/request';
export default {
  data() {
    return {
      headerData: {
        bgImage: '',
        logo: '',
        title: '',
        subtitle: '',
        moreIcon: '',
        bt_text: '',
        bt_desc: ''
      }
    };
  },
  // 组件创建完成后执行
  created() {
    // 可在此处添加初始化逻辑

  },
  // 组件挂载到 DOM 后执行
  async mounted() {
    try {
      await initBaseUrl();
      this.isBaseUrlReady = true;
      const res = await request({ url: '/Index/getHeaderData', method: 'GET' });
      this.headerData = res.data;
    } catch (error) {
      console.error('头部数据加载失败:', error);
    }
    // 可在此处添加需要 DOM 的操作

  },
  methods: {
    getFullImageUrl,

  }
}
</script>

<style lang="scss">
/* 使用组件特定的命名空间避免样式冲突 */
.header-component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rpx 36rpx;
  height: 200rpx;
  background: linear-gradient(0deg, #EEFDE4 0%, #A8F668 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-left: -26rpx;
  margin-right: -26rpx;
  box-sizing: border-box;
  position: relative;
}

.header-component .header-left {
  display: flex;
  align-items: center;
  margin-top: 80rpx;
  margin-left: 26rpx;
  flex-shrink: 0;
}

.header-component .logo {
  width: 76rpx;
  height: 76rpx;
  border-radius: 20rpx;
  margin-right: 18rpx;
  flex-shrink: 0;
}

.header-component .header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* 防止文本溢出 */
}

.header-component .title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-component .subtitle {
  font-size: 24rpx;
  color: #666;
  line-height: 1.2;
  margin-top: 4rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-component .header-icon {
  width: 40rpx;
  height: 40rpx;
  flex-shrink: 0;
  margin-right: 26rpx;
}

/* 响应式调整 */
@media (max-width: 375rpx) {
  .header-component {
    padding: 10rpx 15rpx;
    height: 130rpx;
  }

  .header-component .header-left {
    margin-top: 50rpx;
    margin-left: 15rpx;
  }

  .header-component .logo {
    width: 50rpx;
    height: 50rpx;
  }

  .header-component .title {
    font-size: 28rpx;
  }

  .header-component .subtitle {
    font-size: 22rpx;
  }

  .header-component .header-icon {
    width: 35rpx;
    height: 35rpx;
  }
}
</style>